<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>jsplumb-viso</title>
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">
  <link rel="stylesheet" href="../public/css/index.css">
</head>

<body>
  <div id="app">
    <div class="container-fluid">
      <div class="row">

        <div class="panel panel-default panel-node panel-info" style="margin-left:50px">
          <div class="panel-heading" id="node-1">退出</div>
        </div>

        <div class="panel panel-default panel-node panel-info" style="margin-left:50px">
          <div class="panel-heading" id="node-1">退出</div>
        </div>

        <div class="panel panel-default panel-node panel-info">
          <div class="panel-heading" id="item_left">菜单</div>
          <ul class="list-group">
            <li id="menu-1" class="list-group-item panel-node-list">按1</li>
            <li class="list-group-item panel-node-list">按2</li>
            <li class="list-group-item panel-node-list">按3</li>
            <li class="list-group-item panel-node-list">按4</li>
            <li class="list-group-item panel-node-list">按5</li>
          </ul>
        </div>

        <div class="panel panel-default panel-node panel-info">
          <div class="panel-heading" id="item_2">退出</div>
        </div>
      </div>
    </div>
  </div>

  <script id="tpl-user" type="text/html">
    {{if user}}
      <h2>{{user.name}}</h2>
    {{/if}}
  </script>

  <script src="https://cdn.bootcss.com/node-uuid/1.4.8/uuid.min.js"></script>
  <script src="https://cdn.bootcss.com/mustache.js/2.3.0/mustache.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <!-- <script src="https://cdn.bootcss.com/jsPlumb/1.7.6/jquery.jsPlumb.min.js"></script> -->
  <script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script>
  <script>
    /* global jsPlumb */
    jsPlumb.ready(function () {
      jsPlumb.setContainer('diagramContainer')

      var common = {
        isSource: true,
        isTarget: true,
        connector: 'Straight',
        maxConnections: -1,
        endpoint: 'Rectangle',
        endpointHoverStyle: {
          fill: 'pink',
          outlineStroke: 'pink',
          strokeWidth: 1
        },
        paintStyle: {
          fill: '#5cb85c',
          width: 15,
          height: 15,
          strokeWidth: 1
        },
        hoverPaintStyle: {
          outlineStroke: 'pink'
        },
        connectorStyle: {
          outlineStroke: '#5cb85c',
          strokeWidth: 2
        },
        connectorHoverStyle: {
          outlineStroke: '#f0ad4e',
          strokeWidth: 2
        },
        connectorOverlays: [
          ['Arrow', {
            width: 20,
            length: 20,
            location: 0.8,
            paintStyle: {
              fill: '#5cb85c'
            }
          }]
        ]
      }

      jsPlumb.addEndpoint('item_left', {
        anchors: ['Right', 'Left']
      }, common)

      jsPlumb.addEndpoint('item_left', {
        anchors: ['Left']
      }, common)

      jsPlumb.addEndpoint('menu-1', {
        anchors: ['Right']
      }, common)

      jsPlumb.addEndpoint('item_2', {
        anchors: ['Left', 'Right']
      }, common)

      jsPlumb.addEndpoint('item_2', {
        anchors: ['Right']
      }, common)
    })
  </script>
</body>

</html>